<template>
    <div>
        <h1>{{ count }}</h1>
        <button @click="count++">count++</button>
        <h1>{{ person }}</h1>
        <button @click="person.age++">age++</button>
        <button @click="person.name = '李四'">修改name</button>
        <h1>{{ state }}</h1>
        <button @click="state.x++">x++</button>
        <button @click="state.y++">y++</button>
        <button @click="onStateChange">修改state</button>
    </div>
</template>

<script setup>
import { reactive, ref, watch, watchEffect } from 'vue';

const count = ref(0);
const person = reactive({
    name: '张三',
    age: 20
})
const state = ref({
    x: 1, y: 10
})

watchEffect(() => {
    console.log('count', count.value);
    console.log('person', person);
    console.log('state', state.value);
})

// watch(state, () => {
//     console.log('state发生变化了');
// }, { deep: true, immediate: true, once: true })

// watch(count, (newValue, oldValue) => {
//     console.log("count发生变化了", newValue, oldValue);
// });

// watch(person, () => {
//     console.log("person发生变化了", person);
// })

// watch(() => person.age, (newValue, oldValue) => {
//     console.log("person.age发生变化了", person.age);
// })


// watch([count, () => person.age], (newValue, oldValue) => {
//     console.log('count或者person.age发生变化了', newValue, oldValue);
// })


function onStateChange() {
    state.value = { x: 100, y: 100 };
}
</script>

<style scoped></style>